<template>
    <div class="systemSet">
        <header>系统设置</header>
        <div class="contents">
            <div class="ad_list">
                <div class="key_targets_title">新用户福利设置</div>
            </div>
            <div class="selected" v-if="selectArr.length>0">
                <p>
                    <img src="../../assets/images/market/select2.png" alt="" />
                    <span>已选择&nbsp;
                        <label>{{selectArr.length}}</label>&nbsp;项</span>
                </p>
            </div>
            <div class="tables">
                <el-table v-loading="loading1" :data="tableDatas" style="width: 100%">
                    <el-table-column prop="SUBJECT" label="优惠券名称" width="300"> </el-table-column>
                    <el-table-column prop="CASHVOLVALDAYS" label="有效期" width="100">
                    	<template slot-scope="scope">
                    		<span>{{scope.row.CASHVOLVALDAYS}}天</span>
                    	</template>
                    </el-table-column>
                    <el-table-column prop="STARTTIME" label="启用截止时间" width="400">
                    	<template slot-scope="scope">
                    		<span v-if="scope.row.STARTTIME&&scope.row.ENDTIME">{{scope.row.STARTTIME|filterTimes}}&nbsp;~&nbsp;{{scope.row.ENDTIME|filterTimes}}</span>
                    		<span v-else-if="scope.row.STARTTIME&&!scope.row.ENDTIME">{{scope.row.STARTTIME|filterTimes}}&nbsp;~&nbsp;--</span>
                    		<span v-else-if="!scope.row.STARTTIME&&scope.row.ENDTIME">--&nbsp;~&nbsp;{{scope.row.ENDTIME|filterTimes}}</span>
                    		<span v-else>--&nbsp;~&nbsp;--</span>
                    	</template>
                    </el-table-column>
                    <el-table-column prop="RECNUM" label="数量" width="150"> </el-table-column>
                    <el-table-column prop="options" label="操作" width="250">
                        <template slot-scope="scope">
                            <span class="opretions" @click="goEdit(scope.row.ACTIVITY_ID)">编辑</span>
                            <span class="opretions" @click="dels(scope.row.ACTIVITY_ID)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="ad_list_title">
                    <el-button type="danger" style="background:#e7251a;" @click.native="goAdd">添加优惠券</el-button>
                </div>
            </div>
            <!--添加优惠券-->
            <el-dialog title="添加优惠券" :visible.sync="dialog1" width="90%" style="margin-left:100px;">
                <div class="dialog_content">
                    <div class="d_condition">
                        <div class="d_condition_1">
                            <p>商品名称：</p>
                            <el-input v-model.trim="input2" placeholder="请输入商品名称" style="width:300px;"></el-input>
                        </div>
                        <div class="d_condition_2">
                            <p>类型：</p>
                            <el-select v-model="value3" plsaceholder="请选择" style="width:300px;">
                                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </div>
                        <div class="d_condition_3">
                            <el-button type="danger" style="background:#e7251a;" @click.native="query">查询</el-button>
                            <el-button @click.native="reset">重置</el-button>
                        </div>
                        <div class="d_condition_4">
                            <el-button type="danger" style="background:#e7251a;" @click="goEditAddCoup">新增优惠券</el-button>
                        </div>
                    </div>
                    <div class="d_selected" v-if="selectArr2.length>0">
                        <p>
                            <img src="../../assets/images/market/select2.png" alt="" />
                            <span>已选择&nbsp;
                                <label>{{selectArr2.length}}</label>&nbsp;项</span>
                        </p>
                    </div>
                    <div class="d_tables">
                        <el-table ref="multipleTable" v-loading="loading2" :data="actList2" style="width: 100%" @selection-change="handleSelectionChange2">
                            <el-table-column type="selection" width="50"> </el-table-column>
                            <el-table-column prop="SUBJECT" label="优惠券名称" width="180"> </el-table-column>
                            <el-table-column prop="CATEGORY" label="优惠券类型" width="100">
                            	<template slot-scope="scope">
	                                <span v-if="scope.row.CATEGORY==1">满减券</span>
	                                <span v-else-if="scope.row.CATEGORY==2">兑换券</span>
	                                <span v-else-if="scope.row.CATEGORY==3">服务券</span>
	                                <span v-else-if="scope.row.CATEGORY==4">N元券</span>
	                                <span v-else-if="scope.row.CATEGORY==5">折扣券</span>
	                                <span v-else>--</span>
	                            </template>
                            </el-table-column>
                            <el-table-column prop="USERANGE" label="适用范围" width="200">
                            	<template slot-scope="scope">
	                                <span v-if="scope.row.USERANGE">{{scope.row.USERANGE}}</span>
	                                <span v-else>--</span>
	                            </template>
                            </el-table-column>
                            <el-table-column prop="timeRange" label="启用截止时间" width="500">
                                <template slot-scope="scope">
                                    <div class="block">
                                        <span class="demonstration"></span>                                          
                                        <el-date-picker @change="changeD(scope.$index)" v-model="scope.row.DateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions1"> </el-date-picker>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="validDate" label="期限（天）" width="100">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.Date" style="width:75px;" placeholder="请输入内容"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="condition" label="数量" width="300">
                                <template slot-scope="scope">                                    
                                    <el-input v-model="scope.row.Score" style="width:75px;" placeholder="请输入内容"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="page2" :page-sizes="[6, 8, 10]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas2.COUNT"> </el-pagination>
                    </div>
                    <div class="d_button">
                        <el-button @click.native="dialog1=false">取消</el-button>
                        <el-button type="danger" style="background:#e7251a;" @click.native="adds">添加</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
	import { setCookie, getCookie, removeCookie } from '@/assets/js/cookie'
    export default {
        name: "systemSet",
        data() {
            return {
                // 福利设置列表
                tableDatas: [],
                pickerOptions1: {
		          shortcuts: [{
		            text: '一周',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '一个月',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '三个月',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '一年',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
		              picker.$emit('pick', [start, end]);
		            }
		          }]
		        },
                selectArr: [], //已选择的数组集合
                // 添加优惠券
                dialog1: false, // 是否显示添加优惠券
                input2: "", // 添加优惠券 - 商品名称
                value3: "", // 添加优惠券 - 类型选择
                options3: [
                {
                    value: 1,
                    label: '满减劵'
                }, {
                    value: 2,
                    label: '兑换劵'
                }, {
                    value: 3,
                    label: '服务券'
                }, {
                    value: 4,
                    label: 'N元劵'
                }, {
                    value: 5,
                    label: '折扣劵'
                }],
                tableDatas2: [],
                selectArr2: [],
                currentPage2: 1,
                value4: "",
                value6: [],//启用截止时间
                loading1:true,
                loading2:true,
                page2:1,
                pageSize2:6,
            };
        },
        computed:{
        	//优惠券 请求参数
            objs2() {
                let obj = {};
                obj.PAGE_NO = this.page2;
                obj.PAGE_SIZE = this.pageSize2;
                this.input2 ? obj.LIKESTR = this.input2 : null;
                this.value3 ? obj.CATEGORY = this.value3 : null;
                return obj;
            },
            //优惠券 分页数据
            actList2() {
                let arr = this.tableDatas2.CASHVOLUMERECORDARR;
                let d = new Date();
                let dd = new Date();
            	dd.setDate(dd.getDate() - 30);
                if(arr) {
                    arr.forEach(function(v) {
                        v.Date = 30; //创建一个期限字段
                        v.Score = 1; //创建一个数量字段
                        v.DateTime = [dd,d];//创建一个截止时间字段
                    })
                    return arr;
                }
            }
        },
        created() {
            this.getList();
            this.getTList();
        },
        methods: {
            //新用户福利列表
            getList() {
                this.loading1 = true;
                this.$axiosPost('/4SCAFE/CarUser/getNewUserActList.action').then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.loading1 = false;
                        this.tableDatas = res.ACTCASHARR;
                    }
                })
            },
            //优惠券列表
            getTList() {
                this.loading2 = true;
                this.$axiosPost('/4SCAFE/CashVolumeRecord/getCashVolumeRecordList.action', this.objs2).then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.loading2 = false;
                        this.tableDatas2 = res;
                    }
                })
            },                        
            // 添加优惠券
            goAdd() {
                this.dialog1 = true;
            },
            // 新增优惠券
            goEditAddCoup() {
                this.$router.push("/setting/systemAddCoupon");
            },
            handleSelectionChange2(val) {
                this.selectArr2 = val;
                //console.log(this.selectArr2);
            },
            //选择截止时间
            changeD(rows){            	 
            	if(rows || rows === 0){
            		this.$refs.multipleTable.toggleRowSelection(rows);
            		this.$refs.multipleTable.toggleRowSelection(rows);
            	}            	
            },
            handleSizeChange2(val) {
                this.loading2 = true;
                this.pageSize2 = val;
                this.getTList();
            },
            handleCurrentChange2(val) {
                this.loading2 = true;
                this.page2 = val;
                this.getTList();
            },
            //查询
            query(){
            	this.getTList();
            },
            //重置
            reset(){
            	this.input2 = this.value3 = '';
            },
            //添加
            adds(){
            	
            	if(this.selectArr2.length === 0) {
                    this.$alert('请选择优惠券', '提示', {
                        confirmButtonText: '确定'
                    })
                    return;
                }
            	let arr = JSON.parse(JSON.stringify(this.selectArr2));
            	let obj = {};
            	arr.forEach(function(v) {                    
                    v.AVAILDAYS = +v.Date;
                    v.NUM = +v.Score;  
                    v.STARTDATE = new Date(v.DateTime[0].split('T')[0]).getTime();
                    v.EXPDATE = new Date(v.DateTime[1].split('T')[0]).getTime();
                    delete v.CATEGORY;
                    delete v.Date;
                    delete v.Score;
                    delete v.STATUS;
                    delete v.USERANGE;
                    delete v.DateTime;
                })
            	//console.log(arr);return;
            	obj.CAFEUSER_ID = getCookie('userId');
            	obj.NEWUSERACTARR = JSON.stringify(arr);
            	this.$axiosPost('/4SCAFE/CarUser/batchAddNewUserAct.action',obj).then(res => {
            		if(res.STATUS_CODE === 1){
            			this.$message.success('添加成功');
            			this.dialog1 = false;
            			this.getList();
            		}
            	})
            },
            //编辑
            goEdit(id){
            	this.$router.push({
            		path:'/setting/systemEditCoupon/'+id
            	})
            },
            //删除
            dels(id){
            	this.$axiosPost('/4SCAFE/CarUser/deleteNewUserAct.action',{
            		ACT_ID:id
            	}).then(res => {
            		if(res.STATUS_CODE === 1){
            			this.$message.success('删除成功');
						this.getList();            			
            		}
            	})
            },
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .systemSet {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            width: 97%;
            margin: 25px auto;
            padding: 15px 25px;
            background: #fff;
            .ad_list {
                .key_targets_title {
                    height: 55px;
                    font-size: 20px;
                    line-height: 55px;
                    border-bottom: 1px solid #dcdcdc;
                    font-weight: 700;
                }
                .ad_list_tab {
                    display: flex;
                    padding-top: 10px;
                }
            }
            .selected {
                margin-top: 15px;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                background: #fafafa;
                p {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0 10px;
                    }
                    span {
                        font-size: 16px;
                        color: #717a7d;
                        label {
                            color: #e7251a;
                        }
                    }
                }
            }
            .tables {
                margin-top: 30px;
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
                .opretions {
                    color: #1d93ff;
                    cursor: pointer;
                    margin: 0 2px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .ad_list_title {
                padding: 20px;
                text-align: right;
            }
            .dialog_content {
                border-top: 1px solid #f0f0f0;
                margin-top: 10px;
                padding-top: 25px;
                .d_condition {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    margin-bottom: 25px;
                    .d_condition_1, .d_condition_2, .d_condition_3 {
                        display: flex;
                        align-items: center;
                    }
                    .d_condition_1 {
                        margin-left: -70px;
                    }
                }
                .d_selected {
                    width: 98%;
                    border: 1px solid #f0f0f0;
                    border-radius: 5px;
                    background: #fafafa;
                    margin-bottom: 10px;
                    p {
                        display: flex;
                        align-items: center;
                        img {
                            width: 20px;
                            height: 20px;
                            margin: 0 10px;
                        }
                        span {
                            font-size: 16px;
                            color: #717a7d;
                            label {
                                color: #e7251a;
                            }
                        }
                    }
                }
                .d_tables {
                    .el-pagination {
                        text-align: center;
                        margin-top: 30px;
                    }
                }
                .d_button {
                    width: 95%;
                    display: flex;
                    justify-content: flex-end;
                    margin: 18px 0 8px 0;
                }
                .el-icon-close {
                    font-size: 20px;
                    position: absolute;
                    left: 80px;
                    color: #949494;
                }
            }
        }
    }
</style>